﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="Content/bootstrap.css" />
</head>
<body>
    <div id="app">
        <jiangzemin></jiangzemin>
        <haha></haha>
        <jianghama></jianghama>
        <sucbtn></sucbtn>
        <tsttxt></tsttxt>
        <myparent></myparent>
        <mychild></mychild>
    </div>


    <div id="pt">
        <myparent></myparent>
    </div>
    <script src="Scripts/vue.js"></script>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>

    <!--这个还是要在上面，顺序编译的啊！！！-->
    <template id="tmp">
        <button class="btn btn-success btn-lg">点我测试</button>
    </template>

    <script id="tmp2" type="text/html">
        <input type="text" value="哈哈" />
    </script>


    <template id="tmp3">
        <ul>
            <mychild></mychild>
            <mychild></mychild>
            <mychild></mychild>
            <mychild></mychild>
        </ul>
    </template>
    <template id="tmp4">
        <li>{{ number }}</li>
    </template>

    <script>

        //组件应该挂在到某个vue实例下，否则它不会生效

        //这里是创建组件的构造器，构造器里面有一个template参数
        var myComponent = Vue.extend({
            template: "<div>Test</div>"
        });

        //这里是注册组件，参数为标签名称和组件的构造器
        Vue.component("jiangzemin", myComponent);

        Vue.component("jianghama", {
            template: "<a href='#'>江泽民</a>" 
        });


        Vue.component("mychild", {
            template: "#tmp4",
            data: function () {
                return {
                    number: 3.14
                };
            }
        });

        Vue.component("myparent", {
            template: "#tmp3",
            el: function () {
                return "#pt";
            }
        })

        

        var app = new Vue({
            el: "#app",
            components: {
                "haha": {
                    template: "<b>江泽民</b>"
                },
                "sucbtn": {
                    template: "#tmp"
                },
                "tsttxt": {
                    template: "#tmp2"
                }
            }
        });

        

    </script>


</body>
</html>
